<template>
  <view class="content " @tap="moreshowClose">
    <view class="shopInfo">
      <view class="topImg flexB" :style="{ backgroundImage: 'url(' + listshop.image + ')' }"  @click="preview">
        <view class="word"></view>
        <view class="topLeft" :style="'margin-top:' + statusBarHeight + 'px;'" @tap.stop="back">
          <u-icon name="arrow-left" color="#fff" size="40"></u-icon>
        </view>
      </view>
      <view class="shopBox">
        <view class="shopName">
          <view class="shopAddress">{{ listshop.name }}</view>
          <view class="distriBution">
            <text v-if="inventorydata" class="shopOne">库存{{ inventorydata }}</text>
            <text v-if="inventorydata" class="shopLine">|</text>
            <text class="shopOne">商品重量:{{ listshop.commodityWeight }}{{ listshop.commodityWeightUnit }}</text>
          </view>

        </view>
      </view>
      <!-- tab栏切换动态改变激活样式 -->
      <view class="shopNav">
        <view class="nav">
          <view class="nav-list" v-for="(item, index) in navList" :key="item.id" @tap="changeAct(item)">
            <!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
            <view :class="[act == index ? 'name' : '']">
              <text>{{ item.name }}</text>
            </view>
            <!-- 名字下面的横线 -->
            <view :class="[act == index ? 'line' : '']"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 详情 -->
    <view class="contenttabs ">
      <view class="detail">
        <view style="margin-bottom:24rpx ;">商家电话：{{ listshop.phone }}</view>
        <view style="margin-bottom:24rpx ;">营业时间：{{ listshop.time }}</view>
        <view style="margin-bottom:24rpx ;">{{ listshop.productmaterial }}</view>
		<view v-for="(item, index) in listshop.imageData" :key="item + index">
		  <image style="width: 100%; padding: 10px 0;" :src="item" mode="scaleToFill" ></image>
		</view>
        <!-- <view v-for="(item, index) in imagelist" :key="index">
          <image style="width: 100%;" :src="item.productDetailsImg" mode="widthFix" />
        </view> -->
      </view>
    </view>
    <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CALL_PHONE" :style="'margin-top:' + statusBarHeight + 'px;'"></ykAuthpup>
  </view>
</template>
<script>
import { collectMerchant, insertReport, selectEvaluatePro, selectProductImg, selectProductValue } from '@/api/common'
import { BASE_URL_IMG } from '@/api/request'
import ykAuthpup from '@/components/yk-authpup/yk-authpup.vue'
let that = null;
export default {
  components: {
    ykAuthpup
  },
  data() {
    return {

      more: false,
      shoplist: [],
      shoplistid: 0,
      orderSelect: 0,
      form: {
        note: "帮忙检查一下其他电器",
      },
      hasCollect: false, //是否已经收藏店铺
      reportFormTypeShow: false, //举报商家 类型
      reportFormTypeSelector: ['刷销量', '刷评价', '引导收藏,转单', '其他'],
      reportForm: {

        iphone: null, //电话
        choose: '',
        orderstatus: '',
        textinput: ''
      }, //投诉商家form
      reportpop: false,
      reportRules: {
        iphone: [{
          type: "number",
          required: true,
          message: "请输入手机号",
          trigger: ["change", "blur"]
        },
        {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: "手机号码不正确",
          // 触发器可以同时用blur和change
          trigger: ["blur"]
        }
        ],
        choose: [
          {
            type: "string",
            required: true,
            message: "请选择",
            trigger: ["change", "blur"]
          }
        ],

        textinput: [
          {
            type: "string",
            required: true,
            message: "请输入举报内容",
            trigger: ["change", "blur"]
          }
        ]
      },
      filesArr: [],
      id: '', //从页面跳转获取id,再进行获取数据
      moreShow: false,
      reportpop: false,
      statusBarHeight: 0,
      backgroundImage: '',
      backaddlist: [], //选择的收货地址
      selectTime: null,
      params: {
        month: true,
        day: true,
        hour: true,
        minute: true,
      }, //选择时间的组件
      count: 5,
      bigStar: 5,
      serverAllshow: false,
      serverAllList: [
        '文昌街道', '渔阳镇', '洇溜镇', '官庄镇', '马伸桥镇', '下营镇', '邦均镇'
      ],
      ordershow: false,
      act: 0,
      navList: [{
        id: 0,
        name: "服务详情",
      },
        // {
        // 	id: 1,
        // 	name: "用户评价"
        // }
      ],
      content: null,
      //评论数据
      commentslist: [],
      // 选择商品点击效果
      activeIndex: 0,
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      action: '',
      fileList: [],
      nowFileList: [],
      uploadToken: {
        Authorization: ''
      },
      lists: [],
      reportcen: false,
      listshop: {},
      imagelist: [],
      inventorydata: 0
    }
  },
  onReady() { },
  onLoad(e) {
    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    const eventChannel = that.getOpenerEventChannel();
    // 监听redactInfo事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('redactInfo', function (data) {
      that.listshop = data.info
      console.log("获取到信息data", data)
      console.log("购物商城?", that.listshop)
      that.getshopimg()
      that.inventory()
    });
  },
  methods: {
     //预览图片
     preview() {
      uni.previewImage({
        urls: [this.listshop.image], // 需要预览的图片链接列表
      });
    },
    //评论接口
    getshopimg() {
      console.log("获取到信息", this.listshop.id)
      let obj = {
        productId: this.listshop.id,
      }
      selectProductImg(obj).then(res => {
		  console.log('评论接口',res);
        this.imagelist = res.data
      })
    },
    getcommentslist() {
      let obj = {
        productId: this.listshop.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // merchantId:this.shoplistid
      }
      selectEvaluatePro(obj).then(res => {
        console.log('评论', res.data, this.pageNum)
        res.data.forEach(item => {
          item.evaluateImageList = item.evaluateAge.split(',')
        });

        if (this.pageNum === 1) {
          this.commentslist = res.data
        } else {
          this.commentslist = this.commentslist.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
        console.log(this.commentslist)
      })
    },

    share() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://mo.baidu.com/",
        title: "跑腿app",
        summary: "跑腿的内容",
        imageUrl: "https://ts1.cn.mm.bing.net/th?id=OIP-C.dsIxGGSZmwY-Jgr-dAZNBwHaLH&w=204&h=306&c=8&rs=1&qlt=30&o=6&pid=3.1&rm=2",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    //举报接口
    getreport() {
      let obj = {
        // reportType: 1,
        // reportOrderStatus: 1,
        // reportContents: '为什么没有举报',
        // userPhone: '13333333333'
        merchantName: this.listshop.merchantName,
        merchantId: this.shopdetails.merchantId,
        reportType: this.reportForm.type,
        reportOrderStatus: this.reportForm.orderState,
        reportContents: this.reportForm.note,
        reportImg: this.nowFileList,
        userPhone: this.reportForm.iphone
      }

      insertReport(obj).then(res => {
        console.log('举报商家数据看看看', res)
        this.reportpop = false;

      })
    },
    // 返回
    back() {
      uni.navigateBack()
    },
    moreshowClose() {
      if (this.moreShow) {
        this.moreShow = false
      }
    },
    // 更多
    moreclick() {
      this.moreShow = !this.moreShow;
    },
    // 收藏
    collectionClick() {
      let obj = {
        // merchantId:"1181b1fd01624ec2bcdd1707a62f15d9",
        merchantId: this.listshop.merchantId
      }
      collectMerchant(obj).then(res => {
        console.log('收藏', res)
        this.hasCollect = !this.hasCollect
        this.$u.toast(res.data);
      })
    },
    // 举报商家事件
    openReport() {
      this.reportpop = true;
      this.reportForm.iphone = ''
      this.reportForm.choose = ''
      this.reportForm.orderstatus = ''
      this.reportForm.textinput = ''
      this.lists = []
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      console.log(this.$refs);
      this.$nextTick(() => {
        that.$refs.uForm.setRules(that.reportRules);
      });
    },
    reportFormTypeConfirm(data) {
      this.reportForm.choose = this.reportFormTypeSelector[data]
      console.log(data);
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    // 投诉商家
    reportSubmit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.reportcen = true;
          this.reportpop = false;
          this.getreport()
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      });
      // 如果您不需要进行太多的处理，直接如下即可
      // files = this.$refs.uUpload.lists;
      console.log('看看这个files', files);

    },
    changeAuth(){
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了');
      uni.makePhoneCall({
        phoneNumber: this.shoplist.merchantMobile
      });
		},
    // 打电话
    phoneClick() {
      this.$refs['authpup'].open();
    },
    changeAct(item) {
      // 激活样式是当前点击的对应下标--list中对应id
      this.act = item.id;
      // 可以根据点击事件改变内容
      this.content = item;
      if (item.id == 1) {
        this.pageNum = 1
        this.pagesStatus = false
        this.getcommentslist()
      }
    },

    // 选择商品

    // 选择商品规格

    // 选择地址
    selectAddressClick() {
      uni.$once('nextStep', function (e) {
        that.backaddlist = e
        console.log(that.backaddlist[0].backchoose, '看看我获取到没')
        that.addshow = that.backaddlist[0].backchoose
        console.log(that.addshow, '看看我获取到没1111111111111111')
      })
      uni.navigateTo({
        url: "/pagesMine/mineAddress"
      });
    },

    selectTimeConfirm(time) {
      this.selectTime = time.month + '-' + time.day + ' ' + time.hour + ':' + time.minute
      console.log(time, 'xianshi deshuju', this.selectTime)
    },
    // 支付订单
    ordersshow() {
      console.log(this.form)
      uni.navigateTo({
        url: "/pagesMaintain/maintainOrders"
      });
    },
    gotomap() {
      uni.openLocation({
        latitude: that.shopdetails.lat,
        longitude: that.shopdetails.lng,
        name: that.shopdetails.merchantName,
        address: that.shopdetails.merchantIntroduce,
        success: function () {
          console.log('success');
        }
      });
    },
    deleteItem(index) {
      console.log('1')
      this.$refs.uUpload.remove(index);
    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    beforeRemove(index, lists) {
      console.log("aaa", this.lists[index]);
      return true;
    },
    uploadSuccess(e) {
      this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    uploadRemove(e) {
      // this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    onChooseFail(e) {
      console.log(e);
    },
    reportclose() {


      this.reportcen = false;
      this.more = false;
      this.reportpop = false;
      this.form.iphone = null
    },
    inventory() {
      let obj = {
        productId: this.listshop.id,
      }
      selectProductValue(obj).then(res => {
        console.log('看看库存内容', res)
        this.inventorydata = res.data
      })
    }

  },
  // 下拉加载
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getcommentslist()
    }
  },
}
</script>

<style scoped lang="scss">
@import "@/api/main.css";

.goodSpecActCss {
  padding: 8px 18rpx;
  color: #ffffff;
  background: #D12C25;
}

.goodSpecNoActCss {
  padding: 8px 18rpx;
  border: 1rpx solid #999999;
  color: #000000;
}

.content {
  // background: #E6E6E6;
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  min-height: 100vh;
  background-color: #F5F5F5;

  ::v-deep .u-navbar::after {
    display: none !important;
  }

  .shopInfo {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .topImg {
    width: 100vw;
    padding: 32rpx 32rpx 360rpx;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

    .word {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      z-index: 2;
    }

    .topLeft {
      width: 48rpx;
      height: 48rpx;
      // background-color: rgba(0, 0, 0, 0.2);
      z-index: 666;
      border-radius: 4rpx;
      padding: 6rpx;
    }


    .topRight {
      display: flex;
      justify-content: space-between;
      width: 168rpx;

      image {
        width: 100%;
        height: 100%;
      }

      .moreimg {
        margin-top: 12rpx;
        width: 36rpx;
        height: 12rpx;
      }

      .moreItem {
        padding: 24rpx 32rpx 18rpx 32rpx;
        border-bottom: 1rpx solid #ccc;
      }
    }
  }

  .shopBox {
    position: relative;
    background: white;
    border-radius: 12rpx 12rpx 0rpx 0rpx;

    .shopName {
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      padding: 24rpx 32rpx 18rpx 32rpx;

      .shopAddress {
        line-height: 50rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;

      }

      .shopStar {
        height: 46rpx;
        display: flex;
        align-items: center;

        .star {
          height: 22rpx;
          display: flex;

          image {
            width: 24rpx;
            height: 22rpx;
            margin-left: 4rpx;
          }
        }

        .startwo {
          height: 22rpx;
          display: flex;
          margin-left: 64rpx;
          margin-right: 8rpx;

          image {
            width: 24rpx;
            height: 22rpx;
            margin-left: 4rpx;
          }
        }

        .score {
          height: 38rpx;
          font-family: DIN, DIN;
          font-weight: bold;
          font-size: 36rpx;
          color: #D12C25;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-left: 18rpx;
        }

        .scoretwo {
          height: 38rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .shopTime {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        font-style: normal;
        text-transform: none;
        margin-top: 18rpx;
      }

      .distriBution {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 33rpx;
        font-style: normal;
        margin: 18rpx 0rpx;
        display: flex;

        .shoptext {
          margin-left: 32rpx;
        }

        .shopLine {
          margin-left: 16rpx;
        }

        .shopOne {
          margin-left: 16rpx;
        }
      }

      .announcement {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130606;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .clickAllservice {
          color: #D12C25;
          margin-left: 18rpx;
        }
      }
    }

    .shopImg {
      width: 156rpx;
      height: 156rpx;
      position: absolute;
      right: 32rpx;
      top: -24rpx;
      border-radius: 6rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        border-radius: 6rpx;
        border: 1rpx solid #fff;
      }
    }
  }

  .shopNav {
    display: flex;
    border-bottom: 1rpx solid #999999;
    background-color: white;
    padding-top: 32rpx;
  }

  .nav {
    width: 506rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ffffff;
  }

  .nav-list {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    padding: 0 20rpx;
  }

  .nav-list .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #d12c25;
    line-height: 42rpx;
    text-align: center;
    font-style: normal;

  }

  .nav-list .line {
    margin-top: 5rpx;
    width: 64rpx;
    height: 4rpx;
    background-color: #D12C25;
    margin-left: 32rpx;
    position: relative;
    top: 3rpx;
  }

  /* 内容 */
  .contenttabs {
    padding-bottom: 150rpx;
    background-color: white;
    .comments {
      margin-bottom: 32rpx;
      border-bottom: 1rpx solid #ccc;

      .commentone {
        display: flex;

        .avatar {
          width: 68rpx;
          height: 68rpx;
          background-color: orange;
          margin-right: 16rpx;
          border-radius: 50%;
        }

        .person {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4rpx;
        }

        image {
          width: 24rpx;
          height: 22rpx;
        }

        .datatime {

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: right;
          font-style: normal;
          text-transform: none;

        }
      }

      .commenttwo {
        margin-top: 24rpx;
      }

      .commentthree {
        display: flex;
        padding: 24rpx 0;
        flex-wrap: wrap;

        image {
          width: 212rpx;
          height: 140rpx;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
        }

        .your-class {
          margin-right: 24rpx;
        }
      }
    }

    .detail {
      // width: 686rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      font-style: normal;
      background-color: white;
      padding: 32rpx;

    }

  }

  // 按钮
  .choosebutton {
    position: fixed;
    width: 100vw;
    bottom: 0rpx;
    height: 150rpx;
    background: #fff;

    .btn {
      width: 686rpx;
      height: 96rpx;
      background: #D12C25;
      border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      // line-height: 44rpx;
      // text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }

  .topPrice {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #D12C25;
    text-align: justified;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: baseline;
  }

  .payOrderPopup {
    width: 100vw;
    height: 86vh;
    padding: 0 32rpx;
    background: linear-gradient(180deg, #FFFFFF 6%, #F5F5F5 25%);
    overflow-y: scroll;
  }

  .goodsImgs {
    margin-right: 34rpx;
    width: 190rpx;

    .goodsImg {
      width: 190rpx;
      height: 144rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
    }
  }

  .actiClass {
    margin-right: 34rpx;
    width: 190rpx;
    background: #E6E6E6;
    border-radius: 12rpx;

    .goodsImg {
      width: 190rpx;
      height: 144rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
    }
  }


  .inpCss {
    border-radius: 12rpx;
    border: 1rpx solid #999999;
  }

  .shopcar {
    width: 686rpx;
    height: 96rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;

    .chooseprice {
      width: 512rpx;
      height: 96rpx;
      padding-left: 32rpx;
      background-color: #333333;
      border-radius: 176rpx 0 0 176rpx;
      color: #ffffff;
      font-style: normal;
    }

    .payOrderbutton {
      width: 174rpx;
      height: 96rpx;
      background: linear-gradient(270deg, #d12c25 0%, #d12c25 100%);
      border-radius: 0rpx 176rpx 176rpx 0rpx;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 96rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }

}

.report {
  margin: 0 32rpx 200rpx 32rpx;
  padding: 32rpx 24rpx 0 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;

  .reportlist {
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    justify-content: space-between;
    border-radius: 12rpx;
    padding: 24rpx;
  }
}

.pre-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  // .pre-box ::v-deep(.data-v-2e00e22c) {
  // 	width: 0rpx;
  // }	
  .pre-item {
    width: 160rpx;
    height: 150rpx;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;
    margin: 0 10rpx;
    margin-bottom: 20rpx;
    display: flex;
  }

  .pre-item-image {
    width: 100%;
    height: 100%;
  }

  .u-delete-icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    z-index: 10;
    background-color: $u-type-error;
    border-radius: 100rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.u-progress {
  position: absolute;
  bottom: 10rpx;
  left: 8rpx;
  right: 8rpx;
  z-index: 9;
  width: auto;
}
</style>